 /*common*/
 *,
 .layoutui *::before,
 .layoutui *::after {
     box-sizing: border-box;
 }

 .layoutui ::-webkit-input-placeholder {
     text-overflow: ellipsis
 }

 .layoutui ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
     overflow: auto
 }

 .layoutui ::-webkit-scrollbar-thumb {
     background-color: #e6e6e6;
     min-height: 25px;
     min-width: 25px;
     border: 1px solid #e0e0e0;
     border-radius: 99px
 }

 .layoutui ::-webkit-scrollbar-track {
     background-color: #f7f7f7;
     border: 1px solid #efefef
 }

 .layoutui html {
     font-family: sans-serif;
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     -ms-overflow-style: scrollbar;
     -webkit-tap-highlight-color: rgba(black, 0);
 }

 .layoutui body {
     margin: 0;
     font-family: Arial;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: #212529;
     text-align: left;
     background-color: #fff;
 }

 .layoutui hr {
     box-sizing: content-box;
     height: 0;
     overflow: visible;
 }

 .layoutui h1,
 .layoutui h2,
 .layoutui h3,
 .layoutui h4,
 .layoutui h5,
 .layoutui h6 {
     margin-top: 0;
     margin-bottom: 0.5rem;
 }

 p {
     margin-top: 0;
     margin-bottom: 1rem;
 }

 .layoutui input,
 .layoutui textarea,
 .layoutui select {
     overflow: visible;
 }

 .layoutui input:focus-visible,
 .layoutui textarea:focus-visible,
 .layoutui select:focus-visible {
     outline: none;
 }

 /*
   左侧样式
    */
 .layoutui .selectmenu ul {
     padding-left: 0;
     padding: 0 2px 0 5px;
     margin: 0;
 }

 .layoutui .selectmenu ul li {
     border-style: none;
     line-height: 40px;
     height: 40px;
     border-bottom: 1px solid #e0e0e0;
 }

 .layoutui .selectmenu ul li span {
     width: 62%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
     float: left;
 }

 .layoutui .selectmenu ul li:last-child {
     border-bottom: none;
 }

 .layoutui .selectmenu ul li>a {
     float: right;
     text-decoration: none;
     font-size: 12px;
     background: #3095b4;
     color: white;
     padding: 6px;
     margin: 9px 0 0 5px;
 }

 /*
    可用组件
    */
 .layoutui .dragitem {
     margin-bottom: 10px;
 }

 .layoutui .dragitem.disable {
     pointer-events: none;
     color: #fff;
     pointer-events: none;
     background-color: #6c757d;
     border-color: #6c757d;
     opacity: 0.65;
 }

 /*编辑区域*/
 .layoutui .drageditor {
     overflow: auto;
     /*padding: 30px 15px 10px;
     */
 }

 .layoutui .drageditor:after {
     background-color: #F5F5F5;
     border: 1px solid #DDDDDD;
     border-radius: 4px 0 0 0;
     color: #9DA0A4;
     content: "Container";
     font-size: 12px;
     font-weight: bold;
     padding: 1px 2px;
     position: absolute;
     right: 1px;
     bottom: 35px;
 }

 /*选择区域样式*/
 .layoutui .con_select {
     /*
    padding: 30px 15px 15px;
    */
     padding: 0px;
     border: 1px dashed #DDDDDD;
 }

 /*选择区域组件的样式（在此地插入）*/
 .layoutui .view_select {
     border-top: 3px solid #1100ff;
 }

 /*拖动时，拖动对象边框*/
 .layoutui .drag_proxy {
     border: 1px solid #ccc;
     background: #fafafa;
 }

 /*
       <div class="d_item">
         <a class="d_drag">拖动</a>
         <a class="d_remove">移除</a>
         <a class="d_view">html......</a>
       </div>
 */
 .layoutui .d_item {
     position: relative;
     padding: 0 16px 0 0;
     border: 1px solid transparent;
     width: min-content;
 }

 .layoutui .d_item .d_drag {
     border: 1px solid transparent;
     visibility: hidden;
     background: #3095b4;
     color: white;
     position: absolute;
     top: -1px;
     right: 0;
     cursor: pointer;
     /*
     padding: 2px 3px;
     */
     padding: 0px;
 }

 .layoutui .d_item.hover {
     cursor: default;
     border: 1px dashed #DDDDDD;
     background: rgba(0, 124, 186, .01);
 }

 .layoutui .d_item.hover>.d_drag,
 .layoutui .d_item.hover>.d_remove {
     visibility: inherit;
 }

 .layoutui .d_item .d_remove:hover {
     cursor: pointer;
 }

 /*.layoutui .d_item.select>.d_view{  
      }*/

 .layoutui .d_item .d_view input,
 .layoutui .d_item .d_view select,
 .layoutui .d_item .d_view textarea {
     display: block;
     width: 100%;
     /*padding: 0.375rem 0.75rem; */
     padding: 0px;
     font-size: 1rem;
     line-height: 1.5;
     color: #495057;
     background-color: transparent;
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: 0.25rem;
     transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }

 .layoutui .drageditor table,
 .layoutui .drag_proxy table {
     background-color: transparent;
 }

 .layoutui .drageditor table td,
 .layoutui .drag_proxy table td {
     border: 1px solid #dee2e6;
     min-width: 5em;
     height: 2em;
 }